<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蜂巢纯csss实现有行层级</title>
    <style lang="scss">
        /*scss写法，在此只做收集，不做编译处理*/
        $n: 9;
        $size: 100vw / $n;

        .line{
            display: flex;
            margin-top: -$size / 6;
            $:nth-child(even){
                transform: translateX(-$size / 2);
            }
        }
        .item{
            flex-shrink: 0;
            width: $size;
            height: $size;
            background: #000;
            clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>
</html>